// 完成rem适配（动态根据页面宽度设置rem的基准值-->html标签font-size）
(function () {
  // 1. 页面初始化 获取当前页面的宽度  约定页面宽度除以80  计算rem的基准值  设置html标签
  var setFont = function () {
    var html = document.querySelector('html')  // document.documentElement  获取文档元素html标签
    // 3. 适配区间  1024-1920 之间
    var width = html.clientWidth
    if (width < 1024) {
      width = 1024
    }
    if (width > 1920) {
      width = 1920
    }
    var fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
   // 运行时间
    var t = null;
    t = setTimeout(time, 1000); //开始运行
    function time() {
    clearTimeout(t); //清除定时器
    dt = new Date();
    var y = dt.getFullYear();
    var mt = dt.getMonth() + 1;
    var day = dt.getDate();
    var h = dt.getHours(); //获取时
    var m = dt.getMinutes(); //获取分
    var s = dt.getSeconds(); //获取秒
    document.querySelector(".time").innerHTML =
      "当前时间：" +
      y +
      "年" +
      mt +
      "月" +
      day +
      "日" +
      "-" +
      h +
      "时" +
      m +
      "分" +
      s +
      "秒";
    t = setTimeout(time, 1000); //设定定时器，循环运行
  }
    
  }
  setFont()
  // 2. 在页面尺寸改变的时候 同上
  window.onresize = function () {
    setFont()
  }


})();
 
// 各地区零售额占比
(function () {
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    color: ['#0066FF', '#60cda0', '#ed8884', '#CCFFCC', '#0096ff', '#9fe6b8', '#ed8884', '#1d9dff', '#ed8884'],
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['55%', '50%'],
        data: [
          { value: 58.2, name: '贵阳市' },
          { value: 5.8, name: '黔东南苗族侗族自治州' },
          { value: 3.7, name: '毕节市' },
          { value: 16.3, name: '遵义市' },
          { value: 3.4, name: '黔西南布依族苗族自治州' },
          { value: 3.4, name: '安顺市' },
          { value: 3.2, name: '黔南布依族苗族自治州' },
          { value: 3.2, name: '铜仁市' },
          { value: 2.8, name: '六盘水市' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  var myChart = echarts.init($('.salesPie')[0])
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

// 区域网络零售发展概况
(function () {
  option = {
    color: ['#e5323e', '#CCFFCC'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: {
      show: true,
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)'
        }
      },
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'category',
      // 刻度设置
      axisTick: {
        show: true
      },
      axisLabel: {
        color: '#fff'
      },
      data: ['西秀区', '镇宁布依族苗族自治县', '平坝区 ', '关岭布依族苗族自治县', '普定县', '紫云苗族布依族自治县']
    },
    series: [
      {
        name: '零售额(万元)',
        type: 'bar',
        data: [17022.7, 2014.9, 1998.2, 1275.4, 1084.8, 908.3]
      },
      {
        name: '零售量(万件)',
        type: 'bar',
        data: [1164.7, 116.9, 152.1, 97.2, 127.4, 74.7]
      }
    ]
  }
  var myChart = echarts.init($('.salesBar')[0])
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

// 农产品网络零售发展概况
(function () {
  // 配置
  var option = {
    // 工具提示
    tooltip: {
      // 触发提示的条件  item放到图形触发  axis放到轴触发
      trigger: 'item',
    },
    // 图表数据和类型
    series: [
      {
        // 图表的名称
        name: '安顺农产品网络占比',
        // 图表类型
        type: 'pie',
        // 图表半径  内圆 10%  外圆 70%
        radius: ['10%', '70%'],
        // 图表中心位置
        center: ['50%', '50%'],
        // 数据表现类型  使用的半径
        roseType: 'radius',
        // 图标数据
        data: [
          { value: 42.9, name: '粮油调味42.9%' },
          { value: 35.1, name: '生鲜食品35.1%' },
          { value: 10.7, name: '牛奶乳品10.7%' },
          { value: 6.4, name: '休闲食品6.4%' },
          { value: 2, name: '花卉植物2%' },
          { value: 1.8, name: '传统滋补1.8%' }
        ],
        // 文字样式
        label: {
          fontSize: 10
        },
        // 引导线
        labelLine: {
          // 连接图形
          length: 8,
          // 连接文字
          length2: 10
        }
      }
    ],
    // 设置颜色
    color: ['#ed8884', '#006cff', '#ff9f7f', '#60cda0', '#0096ff', '#9fe6b8']
  };
  // 1. 初始化
  var myChart = echarts.init($('.pie')[0])
  // 2. 使用配置
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

//行业网络发展情况
(function () {
  // 用户统计-柱状图
  var option = {
    // 工具提示
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: 'axis',
      // 轴触发提示才有效
      // axisPointer: {
      //   // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
      //   type: 'shadow'
      // }
    },
    // 图表边界控制
    grid: {
      show: true,
      borderColor: 'rgba(0, 240, 255, 0.3)',
      // 距离 上右下左 的距离
      top: '3%',
      right: '3%',
      bottom: '3%',
      left: '0%',
      // 是否包含文本
      containLabel: true
    },
    // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['食品酒水', '家居家装', '个护化妆 ', '服装服饰', '珠宝礼品', '母婴', '运动户外', '医药保健', '电脑办公', '农资绿植', '箱包皮具', '汽车用品', '家用电器'],
        // 刻度设置
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false
        },
        // 刻度文字
        axisLabel: {
          color: '#4c9bfd'
        }
      }
    ],
    // 控制y轴
    yAxis: [
      {
        // 使用数据的值设为刻度文字
        type: 'value',
        // 刻度设置
        axisTick: {
          show: true
        },
        // 刻度文字
        axisLabel: {
          color: '#4c9bfd'
        },
        // 分割线
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        }
      }
    ],
    // 图形数据和描述
    series: [
      {
        // 图表数据名称
        name: '网络零售额(万元)',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据 {value:2100}
        data: [5517.4, 2695.4, 1018.7, 480.8, 325.8, 165, 144.5, 73.2, 69.6, 63, 32.6, 12.5, 10.9],
        // 控制柱子样式
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        }
      }
    ]
  };
  var myChart = echarts.init($('.bar')[0])
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

// 直播发展概况
(function () {
  var option = {
    xAxis: {
      type: 'category',
      data: ['2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04'],
      // 剔除刻度
      axisTick: {
        show: false
      },
      // 文字颜色
      axisLabel: {
        color: '#4c9bfd'
      },
      // 隐藏轴线
      axisLine: {
        show: false
      },
      // 去除轴两端间距 留白
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      // 剔除刻度
      axisTick: {
        show: false
      },
      // 文字颜色
      axisLabel: {
        color: '#4c9bfd'
      },
      // 分割线颜色
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    series: [
      {
        name: '投放率',
        data: [80, 54, 90, 30, 56, 289, 310, 492, 220, 420, 405, 475],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#00f2f1'  // 线颜色
        }
      }, {
        name: '直播场次',
        data: [10, 55, 43, 96, 130, 233, 263, 296, 43, 69, 294, 460],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#ed3f35'  // 线颜色
        }
      }
    ],
    // 网格设置
    grid: {
      show: true,
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      borderColor: '#012f4a'
    },
    // 工具提示
    tooltip: {
      trigger: 'axis'
    },
    // 图例组件
    legend: {
      right: '10%',
      textStyle: {
        color: '#4c9bfd'
      }
    }
  };
  // 初始化echart
  var myChart = echarts.init($('.online').get(0))
  // 使用配置
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

// 重点网商网络零售发展概况
(function () {
  var $row = $('.enterprise .marquee').children().clone()
  $('.enterprise .marquee').append($row)
})();

// 农村零售发展情况
(function () {
  option = {
    color: ['#e5323e', '#0061ce'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      top: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#4c9bfd'
        },
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#4c9bfd'
        },
        data: ['在线餐饮', '食品酒水', '家居家装', '个护化妆', '在线旅游', '服装服饰']
      }
    ],
    series: [
      {
        name: '零售额占比%',
        type: 'bar',
        label: {
          show: true
        },
        data: [39, 22.7, 11.1, 4.2, 3.5, 2, 1.3]
      },
      {
        name: '零售额同比%',
        type: 'bar',
        label: {
          show: true,
        },
        data: [-47.8, 55.9, -30.7, 103.2, 0, 286.7, 69.1]
      }
    ]
  }
  var myChart = echarts.init($('.retailBar')[0])
  myChart.setOption(option)
  window.addEventListener("resize", function() {
    myChart.resize();
  })
})();

// 点击全屏显示全屏
(function(){
  $('.bigScreen')[0].addEventListener('click',function(){
    if(localStorage.getItem('btnInfo') === 'false'){
      // const videoElement = document.querySelector('.viewport')
      // document.exitFullScreen()
      exitFullScreen(document)
      $('.bigScreen').html('全屏')
      localStorage.setItem('btnInfo','true')
    }else{
      const videoElement = document.querySelector('.viewport')
      // videoElement.entryFullScreen()
      entryFullScreen(videoElement)
      $('.bigScreen').html('退出')
      localStorage.setItem('btnInfo','false')
    }
   
  })

  // 进入全屏：
    function entryFullScreen(docE) {
           if (docE.requestFullScreen) {
           docE.requestFullScreen();
        } else if (docE.mozRequestFullScreen) {
            docE.mozRequestFullScreen();
        } else if (docE.webkitRequestFullScreen) {
             docE.webkitRequestFullScreen();
         }
     }
 
    //  // 退出全屏
     function exitFullScreen(docE) {
         if (docE.exitFullscreen) {
             docE.exitFullscreen();
         } else if (docE.mozCancelFullScreen) {
             docE.mozCancelFullScreen();
         } else if (docE.webkitCancelFullScreen) {
             docE.webkitCancelFullScreen();
         }
        }
    
})();
